<template>
	<view class="container">
		<!-- head -->
		<view class="head">
			<view class="title">
				<text class="txt">结算中心</text>
				<view class="title-icon">
					<image class="icon" src="/static/img/car/searchIcon.png" @click="search"></image>
					<image class="icon" style="margin-left: 32rpx;" src="/static/img/car/orderIcon.png"
						@click="exportHanle"></image>
				</view>
			</view>
			<!-- tabs -->
			<up-tabs :list="list1" @click="click" lineColor="#FFFFFF" :activeStyle="{
            color: '#FFFFFF',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
			fontSize:'30rpx',
        }" :inactiveStyle="{
            color: '#B8D5FB',
            transform: 'scale(1)',
			fontSize:'28rpx',
        }" itemStyle="padding-left: 40rpx; padding-right: 40rpx; height: 80rpx;" :current='tabsValue'></up-tabs>
		</view>
		<!-- 订单 -->
		<view class="order">
			<scroll-view scroll-y class="scroll-box" @scrolltolower="loadMore">
				<setItem v-for="item in listData" :key="item.id" :info="item"></setItem>
				<up-empty mode="list" text='还没有数据' :show='listData.length==0' textSize='25' iconSize='25' width='200'
					height='200' icon="http://cdn.uviewui.com/uview/empty/list.png">
				</up-empty>
			</scroll-view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, onMounted } from 'vue';
	import setItem from './components/setItem.vue';
	import { settlementList, settlementExport } from "@/api/drivers/orderTaking.js"
	import { onShow } from '@dcloudio/uni-app'
	import { useUserStore, useConsumptionStore } from '@/stroes';
	
	// 用户仓库
	const userStore = useUserStore();
	const consumptionStore = useConsumptionStore()
	// 列表
	const listData = ref([]);
	// 创建响应式数据  
	const list1 = reactive([
		{ name: '全部', status: "" },
		{ name: '已结算', status: "3" },
		{ name: '不可结算', status: "1" },
		{ name: '待结算', status: "0" },

	]);
	// 显示下标
	const tabsValue = ref(0)
	const status = ref('')
	// 定义方法  
	function click(item) {
		console.log('item', item);
		tabsValue.value = item.index
		status.value = item.status
		getDetail()
	}

	// 加载更多
	function loadMore() {

	}
	// 搜索
	function search() {
		uni.navigateTo({
			url: '/pages/drivers/setSearch/setSearch'
		})
	}

	// 结算中心列表
	function getDetail() {
		let obj = {
			// id:orderId,
			settlementStatus: status.value,
			startingPlace: consumptionStore.searchSet.startingPlace,
			terminusPlace: consumptionStore.searchSet.transportCompanyName,
			startTime: consumptionStore.searchSet.startTime,
			endTime: consumptionStore.searchSet.endTime,
			plateNos: consumptionStore.searchSet.checkCartTypes || [],
			driverIds: [userStore.accountInfo['user_id']]

		}
		uni.showLoading({
			title: '正在加载中'
		});
		settlementList(obj).then(res => {
			console.log("订单数据333333", res)
			if (res.data.code == 0) {
				listData.value = res.data.data
				uni.hideLoading()
			} else {
				console.log("失败")
				uni.hideLoading()
			}
		})
	}

	// 导出
	function exportHanle() {
		let obj = {
			// id:orderId,
			settlementStatus: status.value,
			startingPlace: consumptionStore.searchSet.startingPlace,
			terminusPlace: consumptionStore.searchSet.transportCompanyName,
			startTime: consumptionStore.searchSet.startTime,
			endTime: consumptionStore.searchSet.endTime,
			plateNos: consumptionStore.searchSet.checkCartTypes || [],
			driverIds: [userStore.accountInfo['user_id']]

		}
		uni.showLoading({
			title: '正在加载中'
		});
		settlementExport(obj).then(res => {
			console.log("订单数据333333", res)
			if (res.data.code == 0) {
				uni.saveFile({
					tempFilePath: res.data,
					success: function (res) {
						console.log("下载成功", res)
					}
				})
				// listData.value=res.data.data
				uni.hideLoading()
			} else {
				console.log("失败")
				uni.hideLoading()
			}
		})
	}
	onShow(() => {
		console.log("用户信息id", userStore.accountInfo['user_id'])
		if (userStore.nowPageId === 2) {
			getDetail()

		}
		console.log("consumptionStore", consumptionStore.searchInfo)
	})
	onMounted(() => {
		getDetail()


	});
</script>

<style scoped lang="scss">
	.container {
		.head {
			height: 152rpx;
			background: linear-gradient(59deg, #438DFF 0%, #056FFF 100%);
			border-radius: 0rpx 0rpx 32rpx 32rpx;
			padding: 0 32rpx;
			padding-top: 108rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.txt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 38rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.icon {
					width: 48rpx;
					height: 48rpx;
				}
			}

		}

		.order {
			padding: 32rpx;
		}
	}

	.scroll-box {
		// padding: 20rpx;
		padding-bottom: 20rpx;
		height: 1180rpx;
		box-sizing: border-box;
		// background-color: skyblue;
	}
</style>